<template>
  <view class="user_info_wrap">
    <view v-if="userInfo.avatarUrl" class="user_img_wrap" v-model="userInfo">
      <!-- <image class="user_bg" :src="userInfo.avatarUrl"></image> -->
      <view class="user_bg"></view>
      <view class="user_info">
        <image class="user_icon" :src="userInfo.avatarUrl"></image>
        <view class="user_name">{{ userInfo.nickName }}</view>
      </view>
    </view>
    <view v-else class="user_log">
      <view @click="gotoLogin">
        <navigator class="user_btn" url="./login" open-type="navigate">
          微信登录
        </navigator>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "index",
  props: {
    userInfo: Object,
  },
  data() {
    return {};
  },
  methods: {
    gotoLogin() {
      console.log("click");
      uni.redirectTo({
        url: "/pages/mine/login",
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
  // watch: {
  //   userInfo: {
  //     handler() {
  //       console.log(111111111111);
  //       this.getUserInfo();
  //     },
  //     immediate: true,
  //   },
  // },
};
</script>
<style lang="scss" scoped>
.user_info_wrap {
  height: 37vh;
  overflow: hidden;
  background-color: #fff;
  position: relative;
  // border-bottom: 1px solid #dbd9d9;
  border-radius: 20rpx;
  .user_img_wrap {
    margin: 40rpx;
    background-color: rgb(250, 240, 163);
    position: relative;
    border-radius: 20rpx;
    .user_bg {
      width: 100%;
      height: 30vh;
      // 高斯模糊
      filter: blur(10rpx);
    }
    .user_info {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20%;
      text-align: center;
      color: #000;

      .user_icon {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }
      .user_name {
        color: rgb(12, 11, 11);
        margin-top: 10rpx;
        font-size: 40rpx;
      }
    }
  }
  .user_log {
    margin: 30rpx;
    .user_btn {
      width: 40%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 40%;
      // border: 1rpx solid greenyellow;
      color: #fff;
      font-size: 38rpx;
      padding: 30rpx;
      border-radius: 15rpx;
      text-align: center;
      background-color: rgb(167, 165, 148);
    }
  }
}
</style>